let webpack = require('webpack');
let path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer');
const globalConfig = require('./src/config.js');

// 像素适配转换插件配置
const postcssOpts = {
  ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
  plugins: () => [
    autoprefixer({
      browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 8', 'iOS >= 8', 'Android >= 4'],
    }),
    // pxtorem({rootValue: 100, propWhiteList: []}) // 是否开启像素转换 px=>rem
  ],
};

module.exports = {
  // 模式
  mode: "development",

  entry: [
    // 'babel-polyfill',// 可以使用完整的ES6特性, 大概增加100KB (transform-runtime已经自动引入)
    './src/index.js', // 编译的入口
  ],

  output: {
    // 输出的目录和文件名
    path: path.resolve(__dirname, "dist"),
    filename: 'bundle.js',
  },

  devtool: 'eval',

  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    hot: true,
    inline: true,
    proxy: {
      '!(/|/#/|**/*.js|**/*.css|**/*.ttf|**/*.jpg|**/*.png|**/*.gif|**/*.ico|**/*.json)': {
        target: globalConfig.api.proxyHost,
        changeOrigin: true,
        secure: false
      }
    }
  },

  // 解析
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
    // 定义路径别名
    alias: {
      Components: path.resolve("src/components"),
      Pages: path.resolve("src/pages"),
      Utils: path.resolve("src/utils"),
      Less: path.resolve("src/statics/less"),
      Image: path.resolve("src/statics/image"),
    }
  },

  // loader
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          plugins: [
            ["transform-runtime", {polyfill: true}],
            ['import', [{libraryName: 'antd-mobile', style: true}]],
          ],
          presets: ['latest', 'stage-0', 'react']
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', {loader: 'postcss-loader', options: postcssOpts}]
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', {loader: 'postcss-loader', options: postcssOpts},
          {
            loader: "less-loader",
            options: {
              javascriptEnabled: true
            }
          }
        ]
      },
      {
        test: /\.(svg|eot|ttf|woff)$/,
        use: ['file-loader']
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000
            }
          }
        ]
      }
    ]
  },


  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    // 生成文件时加上注释
    new webpack.BannerPlugin('This is flyxiaozhu shop'),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development'),
      __DEV__: JSON.stringify(JSON.parse(process.env.NODE_ENV === 'production' ? 'false' : 'true')),  // magic globals, 用于打印一些调试的日志, webpack -p时会删除
    }),
    // 生成html文件
    new HtmlWebpackPlugin({
      template: 'index.html',
      title: globalConfig.name,
      favIcon: globalConfig.favicon
    }),
  ],
};